import { useIntersectionObserver } from '@vueuse/core'
import defaltImg from '@/assets/images/200.png'
// 加载图片
import LoadImg from '@/assets/images/load.gif'

export default {
  install (app) {
    //  挂载所有页面都可以访问的实例属性
    app.config.globalProperties.load = LoadImg
    // 注册
    app.directive('lazys', {
      // 指令是具有一组生命周期的钩子：
      // 在绑定元素的 attribute 或事件监听器被应用之前调用
      created () { },
      // 在绑定元素的父组件挂载之前调用
      beforeMount () { },
      // 绑定元素的父组件被挂载时调用
      mounted (el, bind) {
        // 测试
        // console.log(bind)
        // el.focus()
        // el.style.border = '10px solid red'
        // 监控图片是否进入视口=》如果进入赋值src渲染
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              stop()
              // el.src = LoadImg
              setTimeout(() => {
                el.src = bind.value
              }, 200)
              // 当图片url无效加载失败的时候使用默认图片替代
              el.onerror = function () {
                el.src = defaltImg
              }
            }
          }
        )
      },
      // 在包含组件的 VNode 更新之前调用
      beforeUpdate () { },
      // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
      updated () { },
      // 在绑定元素的父组件卸载之前调用
      beforeUnmount () { },
      // 卸载绑定元素的父组件时调用
      unmounted () { }
    })
  }
}
